<template>
  <div>
      <div style="width: 100%; height: 42px; border-bottom: 3px solid black">
          <el-col :span="12" style="text-align: left; font-size: 30px"><span>报工录入</span></el-col>
          <el-col :span="12" style="text-align: right">
              <el-button type="primary" @click="addReport(1)">保存</el-button>
              <el-button type="primary" @click="addReport(2)">提交</el-button>
          </el-col>
      </div>
      <div style="margin-left: 300px; margin-top: 20px">
          <el-form ref="reportFormRef" :model="reportForm" :rules="rules" style="width: 500px; height: 579px" label-width="80px">
              <el-form-item label="报工姓名">
                  <el-input v-model="ename" readonly style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="报工日期" prop="reportdate">
                  <el-date-picker
                      v-model="reportForm.reportdate"
                      type="date"
                      placeholder="请选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      @change="selectDate"
                      style="width: 400px"
                      :picker-options="ReportDate">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="出勤情况" prop="attendance">
                  <el-radio-group v-model="reportForm.attendance">
                      <el-radio :label="1">上班</el-radio>
                      <el-radio :label="2">调休</el-radio>
                      <el-radio :label="3">请假</el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="工作量">
                  <el-input
                      v-model="reportForm.workload"
                      readonly
                      :style="{width: '400px', textAlign: 'center'}"></el-input>
              </el-form-item>
              <el-form-item label="加班时间" prop="overtime">
                  <el-input-number
                      v-model="reportForm.overtime"
                      :precision="1"
                      :step="0.5"
                      :max="12"
                      :min="0"
                      :step-strictly="true"
                      controls-position="right"
                      style="width: 300px">
                  </el-input-number>
                  <div style="width: 100px; height: 40px; border: 1px solid #DCDFE6; display: inline-block">小时</div>
              </el-form-item>
              <el-form-item label="项目" prop="projectno">
                  <el-select v-model="reportForm.projectno" placeholder="请选择项目" style="width: 400px">
                      <el-option v-for="project in projectList" :key="project.projectno" :label="project.pname" :value="project.projectno"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="工作说明" prop="work">
                  <el-input type="textarea" v-model="reportForm.work" rows="3" style="width: 400px"></el-input>
              </el-form-item>
              <el-form-item label="驳回原因" v-if="returnReasonVisible">
                  <el-input type="textarea" v-model="reportForm.returnReason" rows="3" readonly style="width: 400px"></el-input>
              </el-form-item>
          </el-form>
      </div>

  </div>
</template>

<script>
export default {
    name: "ReportPage",
    data() {
        var overtimeRef = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入加班时间'));
            } else {
                callback();
            }
        };
        return {
            ename: this.$store.state.emp.ename,
            reportForm: {
                empno: this.$store.state.emp.empno,
                reportdate: this.$route.query.reportdate,
                attendance: '',
                workload: '',
                overtime: '',
                projectno: '',
                work: '',
                auditStatus: '',
                returnReason: ''
            },
            disableDates: [],  //要禁用的日期，已报日期
            ReportDate: {
                disabledDate: this.disabledDateMethod,
            },
            projectList: [],
            returnReasonVisible: false,
            rules: {
                reportdate: [
                    { required: true, message: '请选择报工日期', trigger: 'change' }
                ],
                attendance: [
                    { required: true, message: '请选择出勤情况', trigger: 'change' }
                ],
                overtime: [
                    {validator: overtimeRef, trigger: 'blur' }
                  ],
                projectno: [
                    { required: true, message: '请选择项目', trigger: 'change' }
                ],
                work: [
                    { required: true, message: '请填写工作说明', trigger: 'blur' }
                ],
            }
        }
    },
    watch: {
        'reportForm.attendance': {
            handler(newVal) {
                if(newVal == 1 || newVal == 2) {
                    this.reportForm.workload = 1
                } else {
                    this.reportForm.workload = 0
                }
            }
        },
        //监听驳回原因的变化
        'reportForm.returnReason': {
            handler(newVal) {
                //当驳回原因不为空则显示驳回原因
                if(newVal != undefined) {
                    this.returnReasonVisible = true
                } else {
                    this.returnReasonVisible = false
                }
            }
        },

    },
    methods: {
        getProject() {
            const self = this
            let deptno = this.$store.state.emp.deptno
            self.$http.post('getProject', {deptno}).then(res => {
                self.projectList = res.data
            }).catch(() => {
                self.$message.error('获取部门项目失败，请联系管理员')
            })
        },
        //获取已报日期
        getAllReportdate() {
            const self = this
            let empno = self.reportForm.empno
            let hiredate = this.$store.state.emp.hiredate
            self.$http.post('getAllReportdate', {empno, hiredate}).then(res => {
                self.disableDates = res.data
            }).catch(() => {
                self.$message.error('获取禁用日期失败，请联系管理员')
            })
        },
        //禁用日期
        disabledDateMethod(time) {
            let hiredate = this.$store.state.emp.hiredate
            //获取当前日期字符串
            let year = time.getFullYear()
            let month = time.getMonth() + 1
            if(month < 10) {
                month = "0" + month
            }
            let date = time.getDate()
            if(date < 10) {
                date = "0" + date
            }
            let timeDate = year + "-" + month + "-" + date
            //禁用已报日期，入职日期之前的日期以及当日以后的日期
            return this.disableDates.includes(timeDate) || time.getTime() < new Date(hiredate) || time.getTime() > Date.now();
        },
        //日期改变
        selectDate(val) {
            if(val != null) {
                const self = this
                let empno = self.reportForm.empno
                self.$http.post('getReportByEmpnoAndReportdate', {empno, reportdate: val}).then(res => {
                    let rf = self.reportForm
                    let data = res.data
                    rf.attendance = data.attendance
                    rf.workload = data.workload
                    rf.overtime = data.overtime
                    rf.projectno = data.projectno
                    rf.work = data.work
                    rf.returnReason = data.returnReason
                    //清除自动触发的表单验证
                    self.$nextTick(() => {
                        self.refs['reportFormRef'].clearValidate()
                    })
                }).catch(() => {
                    self.$message.error('获取日期对应报工信息失败，请联系管理员')
                })
            }

        },
        //点击保存或提交
        addReport(state) {
            const self = this
            let btnName = state == 1 ? '保存' : '提交'
            self.$refs['reportFormRef'].validate((valid) => {
                if (valid) {
                    this.reportForm.auditStatus = state
                    self.$http.post('empReport', this.reportForm).then(res => {
                        if(res.data == 'success') {
                            self.$message.success(btnName + '成功')
                            if(state == 2) {
                                self.$router.push('/homePage/' + self.$store.state.emp.job)
                            }
                        } else {
                            self.$message.error(btnName + '报工信息失败，请联系管理员')
                        }
                    }).catch(() => {
                        self.$message.error(btnName + '报工信息失败，请联系管理员')


                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    created() {
        this.getProject()
        this.getAllReportdate()
        if(this.$route.query.reportdate != null) {
            this.selectDate(this.$route.query.reportdate)
        }
    }
}
</script>

<style scoped>

</style>